<template>
	<div class="product-list" ref="productList" @touchstart="onTouchStart" @touchmove="onTouchMove"
		@touchend="onTouchEnd" @scroll="onScroll" @scrolltolower="onReachBottom">
		<!-- 下拉刷新提示 -->
		<view v-if="isPullingDown" class="pull-to-refresh">
			<view class="spinner"></view>
			松开刷新
		</view>
		<view v-else class="pull-to-refresh">
			下拉刷新
		</view>

		<!-- 商品列表 -->
		<view v-for="item in products" :key="item.id" class="product-item" @click="goToProductDetail(item)">
			<image :src="item.image" mode="aspectFit" class="product-image" />
			<text class="product-name">{{ item.name }}</text>
			<text class="product-price">￥{{ item.price }}</text>
			<button class="add-to-cart" @click.stop="addToCart(item)">添加到购物车</button>
		</view>

		<!-- 上拉加载状态 -->
		<view v-if="isLoading" class="loading-text">
			<view class="spinner"></view>
			正在加载...
		</view>
		<view v-if="loadingText && !isLoading" class="loading-text">{{ loadingText }}</view>

		<!-- 购物车按钮 -->
		<button class="cart-button" @click="viewCart" @tap="gouwuche">
			<img src="/static/ww/gouwuche.png" alt="" class="gouwuche"/>
			<span v-if="cartCount > 0" class="cart-count">{{ cartCount }}</span>
		</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				products: [{
						id: 1,
						name: "iPhone 16 Pro Max",
						price: 8999,
						image: "/static/ff/ff1.png"
					},
					{
						id: 2,
						name: "华为 Mate70 Pro",
						price: 5999,
						image: "/static/ff/ff3.png"
					},
					{
						id: 3,
						name: "iPhone 14 Pro",
						price: 5999,
						image: "/static/ff/ff4.png"
					},
					{
						id: 4,
						name: "iPad Pro 13",
						price: 8799,
						image: "/static/ff/ff5.png"
					},
					{
						id: 5,
						name: "HUAWEI MatePad",
						price: 5099,
						image: "/static/ff/ff6.png"
					},
					{
						id: 6,
						name: "PS5 数字版",
						price: 3999,
						image: "/static/ff/ff10.png"
					},
					{
						id: 7,
						name: "DJI OSMO Pocket",
						price: 3499,
						image: "/static/ff/ff11.png"
					},
					{
						id: 8,
						name: "Redmi投影仪 3 Pro",
						price: 1499,
						image: "/static/ff/ff13.png"
					},
					{
						id: 9,
						name: "惠普打印机",
						price: 315,
						image: "/static/ff/ff15.png"
					},
					{
						id: 10,
						name: "G502 LIGHTSPEED",
						price: 449,
						image: "/static/ff/ff16.png"
					}
				],
				cartCount: 0, // 购物车商品数量
				startTouchY: 0, // 用于记录开始触摸位置
				isPullingDown: false, // 控制下拉刷新提示显示
				isRefreshing: false, // 防止重复刷新
				isLoading: false, // 上拉加载标志
				loadingText: "", // 上拉加载的状态文本
				maxProductCount: 40, // 最大商品数量
			};
		},
		methods: {
			gouwuche(){
				uni.switchTab({
					url:"/pages/news/news"
				})
			},
			addToCart(product) {
				const app = getApp(); // 获取全局应用实例
				if (!app.globalData.cartItems) {
					app.globalData.cartItems = []; // 确保 cartItems 被初始化
				}
				const existingItem = app.globalData.cartItems.find(item => item.id === product.id);
				if (existingItem) {
					existingItem.quantity += 1; // 增加数量
				} else {
					app.globalData.cartItems.push({
						id: product.id,
						name: product.name,
						price: product.price,
						quantity: 1, // 默认数量为 1
						image: product.image
					});
				}
				app.globalData.cartCount++; // 更新全局购物车数量
				this.cartCount = app.globalData.cartCount; // 更新本地购物车数量
				wx.showToast({
					title: '添加到购物车',
					icon: 'success'
				});
			},
			viewCart() {
				uni.navigateTo({
					url: '/pages/news/news' // 跳转到 news.vue 页面
				});
			},
			onTouchStart(event) {
				this.startTouchY = event.touches[0].clientY;
			},
			onTouchMove(event) {
				const currentTouchY = event.touches[0].clientY;
				if (currentTouchY - this.startTouchY > 50 && !this.isPullingDown && !this.isRefreshing) {
					this.isPullingDown = true;
				}
			},
			onTouchEnd() {
				if (this.isPullingDown && !this.isRefreshing) {
					this.refreshProducts();
				} else {
					this.isPullingDown = false;
				}
			},
			refreshProducts() {
				console.log("开始刷新...");
				this.isRefreshing = true;
				setTimeout(() => {
					this.products = [{
							id: 1,
							name: "Redmi投影仪 3 Pro",
							price: 1499,
							image: "/static/ff/ff13.png"
						},
						{
							id: 2,
							name: "惠普打印机",
							price: 315,
							image: "/static/ff/ff15.png"
						},
						{
							id: 3,
							name: "DJI Neo",
							price: 3999,
							image: "/static/ff/ff12.png"
						},
						{
							id: 4,
							name: "iPad 13",
							price: 8799,
							image: "/static/ff/ff7.png"
						},
						{
							id: 5,
							name: "iPhone 14",
							price: 5999,
							image: "/static/ff/ff5.png"
						},
						{
							id: 6,
							name: "小米15 Pro",
							price: 4999,
							image: "/static/ff/ff4.png"
						},
						{
							id: 7,
							name: "HUAWEI MatePad",
							price: 4999,
							image: "/static/ff/ff3.png"
						},
						{
							id: 8,
							name: "iPhone 16",
							price: 8999,
							image: "/static/ff/ff1.png"
						}
					];
					console.log("刷新完成!");
					this.isPullingDown = false;
					this.isRefreshing = false;
				}, 1000);
			},
			onReachBottom() {
				if (this.isLoading) {
					return;
				}
				this.isLoading = true;
				this.loadingText = "正在加载...";
				setTimeout(() => {
					let len = this.products.length;
					if (len >= this.maxProductCount) {
						this.loadingText = "已加载所有商品";
						this.isLoading = false;
						return;
					}
					let end_id = this.products[len - 1].id;
					for (let i = 1; i <= 8; i++) {
						let id = end_id + i;
						let newProduct = {
							id: id,
							name: '商品 ' + id,
							price: Math.floor(Math.random() * 5000 + 1000),
							image: '/static/ff/ff' + (id % 8 === 0 ? 8 : id % 8) + '.png'
						};
						this.products.push(newProduct);
					}
					this.isLoading = false;
					if (this.products.length >= this.maxProductCount) {
						this.loadingText = "已加载所有商品";
					}
				}, 1000);
			},
			onScroll(event) {
				const {
					scrollHeight,
					scrollTop,
					clientHeight
				} = event.target;
				if (scrollHeight - scrollTop <= clientHeight + 10) {
					this.onReachBottom();
				}
			},
			goToProductDetail(product) {
				uni.navigateTo({
					url: `/pages/made/made?id=${product.id}`
				});
			}
		},
		onShow() {
			const app = getApp();
			this.cartCount = app.globalData.cartCount; // 更新本地购物车数量
		}
	};
</script>

<style scoped>
	.gouwuche {
		width: 20px;
		height: 20px;
		margin-top: 5px;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		overflow-y: auto;
		/* 允许垂直滚动 */
		max-height: 100vh;
		/* 限制最大高度 */
		position: relative;
	}

	.product-item {
		width: 32%;
		margin: 20px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 8px;
		text-align: center;
	}

	.product-image {
		width: 100%;
		height: 180px;
		object-fit: cover;
		border-radius: 5px;
	}

	.product-name {
		font-size: 16px;
		font-weight: bold;
		margin-top: 10px;
	}

	.product-price {
		font-size: 14px;
		color: #e60012;
		margin-top: 5px;
	}

	.add-to-cart {
		background-color: #007bff;
		color: white;
		padding: 6px 12px;
		border-radius: 5px;
		border: none;
		margin-top: 10px;
		font-size: 12px;
		cursor: pointer;
	}

	.add-to-cart:hover {
		background-color: #0056b3;
	}

	/* Pull-to-refresh styles */
	.pull-to-refresh {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding: 10px;
		font-size: 14px;
		background-color: #f1f1f1;
		color: #007bff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.spinner {
		border: 4px solid #f3f3f3;
		/* Light gray */
		border-top: 4px solid #3498db;
		/* Blue */
		border-radius: 50%;
		width: 20px;
		height: 20px;
		animation: spin 2s linear infinite;
	}

	/* 加载动画 */
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		text-align: center;
		padding: 10px;
		font-size: 14px;
		color: #007bff;
	}

	.spinner {
		border: 4px solid #f3f3f3;
		border-top: 4px solid #3498db;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		animation: spin 2s linear infinite;
		margin-right: 10px;
		/* 增加间距 */
	}

	/* 加载更多的文本 */
	.loading-text {
		text-align: center;
		padding: 10px;
		font-size: 14px;
		color: #007bff;
	}

	/* 购物车按钮样式 */
	.cart-button {
		position: fixed;
		bottom: 20px;
		/* 距离底部 20px */
		right: 20px;
		/* 距离右边 20px */
		background-color: #f1f1f1;
		color: white;
		font-size: 10px;
		padding: 12px 15px;
		border-radius: 50%;
		border: none;
		cursor: pointer;
		z-index: 9999;
		/* 设置在最上层 */
	}

	.cart-button:hover {
		background-color: #0056b3;
	}

	/* 购物车数量红点 */
	.cart-count {
		position: absolute;
		top: 2px;
		right: 10px;
		background-color: red;
		color: white;
		font-size: 12px;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		/* 确保数字居中 */
		z-index: 10000;
		/* 确保红点在最上层 */
	}
</style>